<template>

  <div>
    <el-row>

      <!--搜索-->
      姓名 <el-input placeholder="请输入姓名" style="width: 25%;margin-top: 1%"/>
      公司 <el-input placeholder="请输入公司" style="width: 25%;margin-top: 1%"/>

      <!--操作按钮-->
      <span style="margin-left: 1%">
        <el-button type="primary" style="width: 8%" icon="el-icon-search">查询</el-button>
        <el-button type="primary" style="width: 8%" @click="dialogVisible2 = true" icon="el-icon-plus">新增</el-button>
        <el-button type="primary" style="width: 8%" icon="el-icon-rank">导出</el-button>
      </span>
    </el-row>

    <!--表格-->
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        stripe
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="name"
          label="名称"
          sortable
          width="280">
      </el-table-column>

      <el-table-column
          prop="affiliatedcompany"
          label="所属公司"
          sortable
          width="280">
      </el-table-column>

      <el-table-column
          prop="state"
          label="状态"
          sortable
          width="280">
      </el-table-column>

      <el-table-column
          prop="creationtime"
          label="创建时间"
          sortable
          width="280">
      </el-table-column>

      <el-table-column
          prop="orderNum"
          label="操作">
        <template slot-scope="scope">

          <el-button type="text" @click="dialogVisible = true">编辑</el-button>
          <el-divider direction="vertical"></el-divider>

          <template>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="">
              <el-button type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
          <el-divider direction="vertical"></el-divider>

          <el-button type="text" @click="">锁定</el-button>
          <el-divider direction="vertical"></el-divider>

          <el-button type="text" @click="handleEdit(scope.$index, scope.row)">分配角色</el-button>
          <el-divider direction="vertical"></el-divider>

          <el-button type="text" @click="">重置密码</el-button>

        </template>
      </el-table-column>
    </el-table>

    <!--编辑对话框-->
    <el-dialog
        title="用户基本信息编辑"
        :visible.sync="dialogVisible"
        width="75%"
        :before-close="handleClose">
      <el-form :model="editForm" ref="editForm" label-width="100px" class="demo-editForm">

        <el-col :span="12">
          <el-form-item label="用户名" prop="username">
            <el-input disabled v-model="editForm.username"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="editForm.realname"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="所属公司" prop="affiliatedcompany" style="width: 50%">
            <el-input disabled v-model="editForm.affiliatedcompany"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="创建日期" prop="name" style="width: 50%">
            <el-input disabled v-model="editForm.creationdate"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input v-model="editForm.password"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="确认密码" prop="passwordn">
            <el-input v-model="editForm.passwordn"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="用户描述" prop="userdescription">
            <el-input v-model="editForm.userdescription"></el-input>
          </el-form-item>
        </el-col>

        <!--        <el-col :span="12">-->
        <!--          <el-form-item>-->
        <el-button type="primary" @click="submitForm('editForm')">立即创建</el-button>
        <el-button @click="resetForm('editForm')">重置</el-button>
        <!--          </el-form-item>-->
        <!--        </el-col>-->

      </el-form>
    </el-dialog>

    <!--    //新增弹窗-->
    <el-dialog
        title="用户基本信息新增"
        :visible.sync="dialogVisible2"
        width="75%"
        :before-close="handleClose">
      <el-form :model="editForm" ref="editForm" label-width="100px" class="demo-editForm">

        <el-col :span="12">
          <el-form-item label="用户名" prop="username">
            <el-input  v-model="editForm.username"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="editForm.realname"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="所属公司" prop="affiliatedcompany" style="width: 50%">
            <el-input  v-model="editForm.affiliatedcompany"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="创建日期" prop="name" style="width: 50%">
            <el-input  v-model="editForm.creationdate"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input v-model="editForm.password"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="确认密码" prop="passwordn">
            <el-input v-model="editForm.passwordn"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="用户描述" prop="userdescription">
            <el-input v-model="editForm.userdescription"></el-input>
          </el-form-item>
        </el-col>

        <!--        <el-col :span="12">-->
        <!--          <el-form-item>-->
        <el-button type="primary" @click="">立即创建</el-button>
        <el-button @click="resetForm('editForm')">重置</el-button>
        <!--          </el-form-item>-->
        <!--        </el-col>-->

      </el-form>
    </el-dialog>

    <!--    //分配用户按钮-->
    <el-dialog
        title="分配角色"
        :visible.sync="centerDialogVisible"
        width="40%"
        center>
      <el-form  label-width="80px" >

        <el-form-item label="角色">
          <el-tree
              :data="treeData"
              show-checkbox
              node-key="id"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="[5]"
              :props="defaultProps">
          </el-tree>
        </el-form-item>
      </el-form>
      <div align="center"><el-button  @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary"  @click="">提 交</el-button></div>

    </el-dialog>

  </div>


</template>

<script>
export default {
  name: "User",

  data() {
    return {
      treeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      },{
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 16
      },

      //是否弹框
      dialogVisible: false,
      dialogVisible2: false,
      centerDialogVisible: false,
      //表格数据
      tableData: [],
      //表单数据
      editForm: {

      },
    }
  },
  methods: {
    //分配用户按钮除法
    handleEdit(index, row) {
      this.centerDialogVisible=true
      console.log(document.documentElement.clientWidth)
      console.log(index, row);
    },

    //获取菜单列表方法
    getMenuList(){
      this.$axios.get("/sys/menu/list").then(res => {
        this.tableData = res.data.data
      })
    },

    //关闭表单清空数据方法
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
            //清空表单数据
            this.editForm = {}
          })
          .catch(_ => {});
    },

    //重置按钮方法
    resetForm(){
      this.editForm = {}
    }

  },
  // 页面加载事件
  created() {
    //页面加载调用获取菜单列表方法
    this.getMenuList()
  }
}

</script>

<style scoped>

</style>
